<template>
	<view>
		<!-- 记忆列表 -->
		<view class="xm-flex-c xm-padding-30r"
			:style="statusBarHeight==undefined?'height: auto;':'margin-top:'+statusBarHeight+'rpx;'">
			<view class=""
				style="width: 100%;background-color: #FFFFFF;height: auto;border-radius: 20rpx;box-sizing: border-box;align-items: center;">
				<view class="xm-flex-r" style="align-items: center;">
					<view class="xm-fontsize-30 xm-flex-r xm-padding-30r" @click="typeListPage = 0"
						style="margin-top: 30rpx;margin-right: 30rpx;font-weight: 600px;color:#F0AD4E;align-items: center;">
						<image v-show="typeListPage == 0" src="../../static/images/icon/xinxin.png"
							style="width: 50rpx;margin-right: 10rpx;" mode="widthFix"></image>
						记忆碎片
					</view>
					<view v-if="id==1" @click="typeListPage = 1" class="xm-fontsize-30 xm-fontsize-30 xm-padding-30r xm-flex-r"
						style="margin-top: 30rpx;color: #26ACD4;align-items: center;">
						<image v-show="typeListPage == 1" src="../../static/images/icon/xinxin.png"
							style="width: 50rpx;margin-right: 10rpx;" mode="widthFix"></image>
						数据分析
					</view>
				</view>
				<view class="" style="border-bottom: 2rpx #bbcbd6 solid;width: 90%;margin: auto;">

				</view>

				<view v-if="typeListPage == 1" class="" style="margin-top: 30rpx;margin-bottom: 30rpx;">
					<view class="" style="width: 100%;height: auto;" id="main">
						<!-- <view v-if="typeTP == 1" class="charts-box">
							<qiun-data-charts type="column" :chartData="chartData" />
						</view> -->
						<view class="charts-box" v-if="typeTP == 2">
							<qiun-data-charts type="pie" :chartData="chartPieData" />
						</view>

						<view class="xm-flex-rr xm-padding-30r">
							<view @click="typeTP = 2" class="xm-fontsize-25 xm-jb-201"
								style="color: #ffffff;width: 100rpx;height: 60rpx;line-height: 60rpx;text-align: center;border-radius: 20rpx;">
								饼图
							</view>

						<!-- 	<view @click="typeTP = 1" class="xm-fontsize-25 xm-jb-201"
								style="margin-right: 30rpx;color: #ffffff;width: 100rpx;height: 60rpx;line-height: 60rpx;text-align: center;border-radius: 20rpx;">
								柱形图
							</view> -->
						</view>

					</view>
				</view>

				<!-- // 记忆碎片 --------------------------- -->
				<view class="xm-padding-30r" style="" v-if="typeListPage == 0">

					<view class="xm-flex-r xm-justify-between" style="margin-bottom: 30rpx;">
						<view class="xm-grid"
							style="padding-top: initial;grid-template-columns:1fr 1fr 1fr 1fr;text-align: center;box-sizing: border-box;width: 70%;">
							<view :class="[nswstoptype==value?'select-newstop xm-fontsize-25':'xm-fontsize-25 a26ACD4']"
								style="width: 100%;height: 41rpx;line-height: 41rpx;" v-for="(item,value) in newstop"
								:key="value" @click="setnewstop(value)">
								{{item}}
							</view>
						</view>
						<view class="xm-flex-r" style="" @click="onTimeType" v-if="id!=-1">

							<image v-show="timeType" src="../../static/images/icon/down.png"
								style="width: 40rpx;margin-right: 1rpx;" mode="widthFix"></image>
							<image v-show="!timeType" src="../../static/images/icon/up.png"
								style="width: 40rpx;margin-right: 1rpx;" mode="widthFix"></image>
							<view class="xm-fontsize-25" style="line-height: 38rpx;color: #F0AD4E;">
								时间
							</view>
						</view>
					</view>

					<swiper v-if="id != -1" :indicator-dots="false" :autoplay="false" :current="nswstoptype"
						@change="typeList"
						:style="windowHeight==undefined?'height: 910rpx;':'height:'+windowHeight+'px;'">

						<swiper-item>
							<view class="swiper-item"
								:style="windowHeight==undefined?'height: 910rpx;':'height:'+windowHeight+'px;'+'width: 100%;overflow-y: scroll;box-sizing: border-box;'">
								<view v-for="(data,value) in fragmentData" :key="value" class="xm-padding-30r xm-flex-c"
									@click="$api.gotoType('to','../framgmentdetalis/framgmentdetalis?id='+data.fg_id+'&good='+data.good)"
									style="width: 96%;margin-left: 2%; height: auto;color: #FFFFFF;background:linear-gradient(to left, #817282 ,#c7b0aa);box-sizing: border-box;margin-bottom: 30rpx;border-radius: 20rpx;">

									<view class="xm-flex-r xm-fontsize-20" style="color: #d8d8d8;margin-bottom: 20rpx;">
										{{data.date!=undefined?data.date:''}}
									</view>
									<!-- 标题和标签 -->
									<view class="xm-flex-r xm-justify-between" style="align-items: center;">

										<view class="xm-fontsize-30" style="color: #FFFFFF;width: 400rpx;">
											{{data.title}}
										</view>
										<view v-if="data.label!=undefined" class="xm-fontsize-20"
											style="color: #008200;text-align: center;width: 120rpx;height: 47rpx;line-height: 47rpx;border-radius: 10rpx;background-color: #ececec;">
											{{data.label}}
											<!-- 标签 -->
										</view>

									</view>
									<!-- 简介 -->
									<view class="xm-flex-r xm-justify-between"
										style="align-items: flex-end;margin-top: 20rpx;">

										<view class="xm-fontsize-20"
											style="margin-top: 10rpx;width: 400rpx;height: auto;overflow-x: hidden;">
											{{data.hint}}
										</view>

										<view class="xm-flex-r xm-fontsize-25" style="">
											<view class=""
												@click.stop="$api.gotoType('to','./updatememoryfragment?id='+data.fg_id)">
												修改
											</view>
											<view @click.stop="open(data.fg_id)" class="" style="margin-left: 30rpx;">
												删除
											</view>

										</view>
									</view>


								</view>
							</view>
						</swiper-item>

						<swiper-item>
							<view class="swiper-item"
								style="width: 100%;height: 900rpx;overflow-y: scroll;box-sizing: border-box;">
								<view v-for="(data,value) in fragmentData" v-if="data.typeopen == 1" :key="value"
									class="xm-padding-30r xm-flex-c"
									@click="$api.gotoType('to','../framgmentdetalis/framgmentdetalis?id='+data.fg_id+'&good='+data.good)"
									style="width: 96%;margin-left: 2%; height: auto;color: #FFFFFF;background:linear-gradient(to left, #817282 ,#c7b0aa);box-sizing: border-box;margin-bottom: 30rpx;border-radius: 20rpx;">

									<view class="xm-flex-r xm-fontsize-20" style="color: #d8d8d8;margin-bottom: 20rpx;">
										{{data.date!=undefined?data.date:''}}
									</view>
									<!-- 标题和标签 -->
									<view class="xm-flex-r xm-justify-between" style="align-items: center;">

										<view class="xm-fontsize-30" style="color: #FFFFFF;width: 400rpx;">
											{{data.title}}
										</view>
										<view v-if="data.label!=undefined" class="xm-fontsize-20"
											style="color: #008200;text-align: center;width: 120rpx;height: 47rpx;line-height: 47rpx;border-radius: 10rpx;background-color: #ececec;">
											{{data.label}}
											<!-- 标签 -->
										</view>

									</view>
									<!-- 简介 -->
									<view class="xm-flex-r xm-justify-between"
										style="align-items: flex-end;margin-top: 20rpx;">

										<view class="xm-fontsize-20"
											style="margin-top: 10rpx;width: 400rpx;height: auto;overflow-x: hidden;">
											{{data.hint}}
										</view>

										<view class="xm-flex-r xm-fontsize-25" style="">
											<view class=""
												@click.stop="$api.gotoType('to','./updatememoryfragment?id='+data.fg_id)">
												修改
											</view>
											<view @click.stop="open(data.fg_id)" class="" style="margin-left: 30rpx;">
												删除
											</view>

										</view>
									</view>


								</view>
							</view>
						</swiper-item>

						<swiper-item>
							<view class="swiper-item"
								style="width: 100%;height: 900rpx;overflow-y: scroll;box-sizing: border-box;">
								<view v-for="(data,value) in fragmentData" v-if="data.typeopen==-1" :key="value"
									class="xm-padding-30r xm-flex-c"
									@click="$api.gotoType('to','../framgmentdetalis/framgmentdetalis?id='+data.fg_id+'&good='+data.good)"
									style="width: 96%;margin-left: 2%; height: auto;color: #FFFFFF;background:linear-gradient(to left, #817282 ,#c7b0aa);box-sizing: border-box;margin-bottom: 30rpx;border-radius: 20rpx;">

									<view class="xm-flex-r xm-fontsize-20" style="color: #d8d8d8;margin-bottom: 20rpx;">
										{{data.date!=undefined?data.date:''}}
									</view>
									<!-- 标题和标签 -->
									<view class="xm-flex-r xm-justify-between" style="align-items: center;">

										<view class="xm-fontsize-30" style="color: #FFFFFF;width: 400rpx;">
											{{data.title}}
										</view>
										<view v-if="data.label!=undefined" class="xm-fontsize-20"
											style="color: #008200;text-align: center;width: 120rpx;height: 47rpx;line-height: 47rpx;border-radius: 10rpx;background-color: #ececec;">
											{{data.label}}
											<!-- 标签 -->
										</view>

									</view>
									<!-- 简介 -->
									<view class="xm-flex-r xm-justify-between"
										style="align-items: flex-end;margin-top: 20rpx;">

										<view class="xm-fontsize-20"
											style="margin-top: 10rpx;width: 400rpx;height: auto;overflow-x: hidden;">
											{{data.hint}}
										</view>

										<view class="xm-flex-r xm-fontsize-25" style="">
											<view class=""
												@click.stop="$api.gotoType('to','./updatememoryfragment?id='+data.fg_id)">
												修改
											</view>
											<view @click.stop="open(data.fg_id)" class="" style="margin-left: 30rpx;">
												删除
											</view>

										</view>
									</view>


								</view>
							</view>
						</swiper-item>

					</swiper>

					<!-- 新增按钮 -->
					<view v-if="id!=-1" @click="$api.gotoType('to','./addmemoryfragment?id='+id)"
						class="xm-flex-r xm-align-content-center"
						style="align-items: center;position: fixed;bottom: 140rpx;left: 70rpx;z-index: 999;width: 100rpx;height: 100rpx;text-align: center;line-height: 66rpx;background: radial-gradient( #d493f0 ,#feffab);border-radius: 50%;box-shadow: 0px 0px 30rpx #5371f5;">
						<image src="../../static/images/icon/add2.png" mode="widthFix"
							style="width: 76rpx;margin: auto;"></image>
					</view>

				</view>

				<view class="xm-padding-30r" @click="$api.gotoType('to','../me/login/login')" v-if="id==-1">
					你还未登陆 ！（点击登录）
				</view>
			</view>
		</view>



		<view class="">
			<uni-popup ref="popup" type="top">
				<view class="xm-flex-c xm-padding-30r xm-border-box"
					style="width: 100%;height: 400rpx;background-color: #FFFFFF;border-radius: 0rpx 0rpx 40rpx 40rpx;">

					<view class="" style="width: 100%;text-align: center;margin-top: 140rpx;">
						是否删除 afaf 的记忆碎片 ？
					</view>

					<view class="xm-flex-r xm-justify-around" style="width: 100%;height: auto;margin-top: 60rpx;">

						<view class="" @click="setDelete()"
							style="width: 120rpx;height: 47rpx;line-height: 47rpx;border: 4rpx #007AFF solid;text-align: center;border-radius: 10rpx;">
							确认
						</view>
						<view @click="close" class=""
							style="width: 120rpx;height: 47rpx;line-height: 47rpx;border: 4rpx #007AFF solid;text-align: center;border-radius: 10rpx;">
							取消
						</view>

					</view>

				</view>


			</uni-popup>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				typeTP: 2, //图片选择
				newstop: ["全部", "公开", "私密"],
				nswstoptype: 0,
				timeType: true,
				fragmentData: undefined,
				id: undefined,
				onfg_id: undefined,
				statusBarHeight: undefined,
				windowHeight: undefined,
				typeListPage: 0,
				chartData: {
					categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
					series: [{
						name: "公开值",
						data: [35, 36, 31, 33, 13, 34]
					}, {
						name: "私有值",
						data: [18, 27, 21, 24, 6, 28]
					}]
				},
				chartPieData: {
					series: [{
						name: "公开值",
						data: 80
					}, {
						name: "私有值",
						data: 20
					}]
				}
			}
		},
		onLoad() {
			var that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res);
					console.log(res.model);
					console.log(res.pixelRatio);
					console.log(res.windowWidth);
					console.log(res.windowHeight);
					console.log(res.language);
					console.log(res.version);
					console.log(res.platform);
					that.statusBarHeight = res.statusBarHeight
					that.windowHeight = (res.windowHeight - 170)
				}
			});
		},
		onShow() {
			uni.getStorage({
				key: "token",
				success: data => {
					console.log(data.data);
					this.id = data.data
					if (data.data != -1) {
						this.getList()
					}
				}
				// ,
				// fail(err) {
				// 	console.log(err);
				// 	this.id = undefined
				// 	this.fragmentData = []
				// 	console.log(this.id);
				// 	console.log(this.fragmentData);
				// }
			})
		},
		methods: {

			setnewstop(data) {
				this.nswstoptype = data
			},
			typeList(data) {
				this.nswstoptype = data.detail.current
			},
			onTimeType() {
				this.fragmentData.reverse()
				this.timeType = !this.timeType
			},
			open(id) {
				this.$refs.popup.open('top')
				this.onfg_id = id
			},
			close() {
				this.$refs.popup.close()
			},
			getList() {
				var that = this
				this.$http(this.$url.fragment.list, "post", {
					'content-type': 'application/json'
				}).then(res => {
					// console.log(res);
					var arr = []
					res.list.forEach(item => {
						if (item.user_id == that.id) {
							arr.push(item)
						}
					})
					this.fragmentData = arr

					let gkdata = []
					let sydata = []
					// let data = {
					let num = 0
					// }
					let dateL = []
					// var i = 0
					// var j = 0
					arr.forEach(item => {
						// i++
						let acss = item.date.split(" ", 2)
						let as = acss[0].split("-")
						let b = as[1] + "-" + as[2]
						console.log(b);
						let a = 0
						dateL.forEach(qwe => {
							if (b == qwe) {
								a = 1
								// j = i
								// if (item.typeopen == 1) {
								// 	gkdata[j--]++
								// } else {
								// 	sydata[j--]++
								// }
							}
								
						})
						if (item.typeopen == 1) {
							gkdata.push(1)
						} else {
							sydata.push(1)
						}
						console.log(gkdata);
						console.log(sydata);
						if (a == 0) {
							dateL.push(b)
						}
						
						if (dateL.length > 6) {
							dateL.shift()
						}
						
						
					})

					console.log(dateL);
					// console.log(gkdata);
					// console.log(sydata);
					// fragmentData
					this.chartData = {
						categories: dateL,
						series: [{
							name: "公开值",
							data: gkdata
						}, {
							name: "私有值",
							data: sydata
						}]
					}
					this.chartPieData = {
						series: [{
							name: "公开值",
							data: gkdata.length
						}, {
							name: "私有值",
							data: sydata.length
						}]
					}
					console.log(this.fragmentData);
				}).catch(err => {
					this.$api.msg("网路异常或无网络连接")
					uni.stopPullDownRefresh();
				})
			},
			setDelete() {

				this.$http(this.$url.fragment.delete, "post", {
					fg_id: this.onfg_id
				}, {
					'content-type': 'application/json'
				}).then(res => {
					console.log(res);
					this.getList()
					this.$refs.popup.close()
					this.$api.msg("删除成功")
				}).catch(err => {
					this.$api.msg("网路异常或无网络连接")
					uni.stopPullDownRefresh();
				})

			}

		}
	}
</script>

<style>
	page {
		background-color: #e1e1e1;

	}

	.select-newstop {
		border-radius: 20rpx;
		border: 1rpx #007AFF solid;
		color: #0000FF;
	}

	.a26ACD4 {
		color: #F0AD4E;
	}
</style>
